<template>
	<view style="padding: 20rpx;">

		<view class="acea-rows search">
			<view class="headerNav">店铺名称:</view>
			<input type="text" placeholder="请输入店铺名称" placeholder-class="placeholder-class" v-model="storeName"
				class="searchInput" />
			<u-button style="width: 120rpx;height: 80rpx;" type="primary" @click="getList" text="查询"></u-button>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view id="demo1" class="scroll-view-item uni-bg-red">
				<view class="acea-row" v-for="(item,index) in dataList" :key="item.id">
					<view class="info line1" @click="confirm(item)">{{ item.storename }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getPointListApi
	} from '@/api/recruit.js'
	export default {
		data() {
			return {
				storeName: '',
				dataList: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				page:1,
				limit: 20,
				totalPage: 0,
			}
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: '加载中'
				});
				try {
					let res = await getPointListApi({
						storename: this.storeName,
						page:this.page
					});
					this.dataList = [...this.dataList,...res.data.list]
					this.totalPage = res.data.totalPage;
				} catch (e) {
					//TODO handle the exception
				} finally{
					uni.hideLoading();
				}
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				if(this.totalPage <= this.page) return 
				this.page += 1;
				this.getList()
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			confirm(item) {
				this.$emit('click', item)
			}
		}
	}
</script>

<style>
	.scroll-Y {
		height: 600rpx;
		margin-top: 40rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 900rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 500rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.headerNav {
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.popupTitle {
		font-size: 34px;
	}


	.info {
		text-align: left;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;
	}

	.info:hover {
		border: 1px solid #999;
		border-radius: 15rpx;
		height: 70rpx;
	}

	.search {
		display: flex;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.search .searchInput {
		width: 75%;
		height: 80rpx;
		border-radius: 15rpx;
		border: 1px solid #999;
		margin: 0 20rpx;
		padding: 0 10rpx;
	}
	
	.placeholder-class {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(212, 212, 212, 1);
	}
</style>